import React, {Component} from 'react';
import PropTypes from 'prop-types'
import { withRouter } from "react-router-dom"
import {Button, List} from 'antd-mobile';
import { NavBar, Icon, Drawer} from 'antd-mobile';
class MatchButton extends Component {

    static propTypes = {
        inf:PropTypes.object.isRequired,
        matchState:PropTypes.object.isRequired,
        matchStart:PropTypes.func.isRequired
    }

    state = {
        open: false
    }

    onOpenChange = (...args) => {
        console.log(args);
        this.setState({ open: !this.state.open });
    }
    onMatchClick() {
        this.props.history.push("/Match");
    }   
      onFriendClick() {
        this.props.history.push("/Friend");
    }  
      onQuitClick() {
        this.props.history.push("/");
      }   

    componentDidMount(){
        const{matchState} = this.props
        console.log(matchState.state)
        if(matchState.state === 1)
            {
                console.log(matchState.state)
                this.props.history.push("/Friend");
            }
    }

    onMatchButtonClick(){
        const{inf,matchStart} = this.props
        matchStart("avc");
    }

    render(){
      const matchIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1217377&size=128";
      const friendIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1215657&size=128";
      const QuitIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1152326&size=128";

        const{matchState} = this.props
            if(matchState.state === 2)
            return(
                <div>
                    <div>匹配失败</div>
                    <input type = 'button' value = "匹配" onClick={()=>this.onMatchButtonClick()}/>
                </div>
            )
        else if (matchState.state === 1)
            this.props.history.push("/Friend");//加一个判断函数


            const sidebar = (<List>
                <List.Item 
                multipleLine></List.Item>
                <List.Item 
                thumb = {matchIconUrl} 
                multipleLine onClick = {()=>{this.onMatchClick()}}>匹配</List.Item>
                <List.Item 
                thumb = {friendIconUrl} 
                multipleLine onClick = {()=>{this.onFriendClick()}}>好友</List.Item>
                <List.Item 
                thumb= {QuitIconUrl} style = {{color:"blue"}}
                multipleLine onClick = {()=>{this.onQuitClick()}}>退出</List.Item>
              </List>);

        return(
            <div style = {{width:window.innerWidth,height:window.innerHeight,textAlign:'center',verticalAlign:'middle'}}>
            
              <NavBar className = "my-friend-list-bar" onLeftClick={this.onOpenChange}
                      mode="dark"
                     leftContent={[
                 <Icon onClick={()=>{console.log("onleft");this.onOpenChange();}} key="0" type="ellipsis" style={{ marginRight: '16px' }} />
                 ]}
              >欢迎进入流伪捷的世界！</NavBar>
            <Button style = {{top:window.innerHeight/2-100,margin:"auto auto",width: 150,height: 150, textAlign:'center',verticalAlign:'middle', whiteSpace: 'pre-wrap', fontSize:40, padding:30}} onClick={()=>this.onMatchButtonClick()} size = "lg" type = 'primary'>开始匹配</Button>
            {this.state.open == true?<Drawer
        onClick={() => {console.log("onDrawclick")}}
        className="my-drawer"
        style={{ minHeight: document.documentElement.clientHeight }}
        enableDragHandle
        contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
        overlayStyle={{ color: '#A6A6A6'}}
        sidebar={sidebar}
        open={this.state.open}
        onOpenChange={this.onOpenChange}
        />:<br/>}
        </div>
        )
    }
}

export default withRouter(MatchButton)